<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      >
    <head>
        <title>Crucigrama</title>
    </head>
    <body>
    <h:form>
        <h:messages />
        <h:outputLabel for="nombreActual" value="Usuario : "/>
        <h:outputText id="nombreActual" value="#{crucigramaBacking.nombre}" />
        <br/>
        <h:outputLabel for="nombre" value="Digita tu nombre y password"/>
        <h:inputText id="nombre" value="#{crucigramaBacking.nombre}" /> <h:inputSecret id="password" value="#{crucigramaBacking.password}" />
        <h:commandButton value="Ingresar" action="#{crucigramaBacking.asignarNombre}"/>
        <br/>
        <h:outputLabel for="nuevoNombre" value="Registra tu nombre y password"/>
        <h:inputText id="nuevoNombre" value="#{crucigramaBacking.nombre}" /> <h:inputSecret  id="nuevoPassword" value="#{crucigramaBacking.password}" />
        <h:commandButton value="Ingresar" action="#{crucigramaBacking.registrarNuevoUsuario}"/>
        <br/>
        <h:commandButton value="Crear Juego" action="#{crucigramaBacking.crearJuego}"/>
        
        <h:outputLabel for="idJuego" value="Mostrando La Partida "/>
        <h:outputText id="idJuego" value="#{crucigramaBacking.partidaActual}"/>
        
        <br/>
        
        <h:outputLabel for="busquedaPartida" value="Unirse a una Partida"/>
        <h:inputText id="busquedaPartida" value="#{crucigramaBacking.partidaABuscar}" />
        <h:commandButton value="Unirse" action="#{crucigramaBacking.unirseAPartida}"/>
        
        <br/>
        
        <h:outputText value="Usuarios Activos:"/>
        <br/>
        <h:outputText value="#{crucigramaBacking.jugador1}"/>
        <br/>
        <h:outputText value="#{crucigramaBacking.jugador2}"/>
        <br/>
        <h:outputText value="#{crucigramaBacking.jugador3}"/>
        <br/>
        <h:outputText value="#{crucigramaBacking.jugador4}"/>
        
        <canvas id="myCanvas" width="800" height="800"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var i=0;
      
      var tablero = #{crucigramaBacking.tableroDo};
      
      context.beginPath();
      while(i!=15){
          var j=0;
          
          while(j!=15){
              var x = 100+(37*i);
              var y = 100+(37*j);
              context.rect(x,y , 35, 35);
              
              context.lineWidth = 1;
              context.strokeStyle = 'gray';
              context.font = "bold 16px sans-serif"
              //context.fillStyle = 'white';
              //context.fill();
              context.fillText(tablero[i][j],x+12,y+22);
              context.stroke();
              //canvas.strokeText();
              j++;
          }
          i++;
      }
      
      
    </script>
    <br/>
    <h:outputLabel for="listaLetras" value="Tus Letras:"/>
    <h:outputText id="listaLetras" value="#{crucigramaBacking.listaLetrasDisponibles}"/>
    <br/>
    <h:inputText label="jugada:" value="#{crucigramaBacking.jugada}"/>
    <h:commandButton value="realizar jugada" action="#{crucigramaBacking.realizarJugada}" />
    </h:form>
        
    </body>
</html>
